<template>
<div>
  <div 
    :class="act_class"
    ref="wTextareaContent"
    @focus="isLocked = true"
    @blur="isLocked = false"
    @input="handleInput($event.target)"
  >
    <span v-for="(item,index) in arr" :key="index" ref="tags">
        <el-tag type="success" ref="tag" class="tag">{{item}}</el-tag>
        <span>&ensp;</span>
    </span>
  </div>
</div>
</template>

<script>
export default {
    components: {
    },
    props: {
        value: {
            default: ''
        },
        pinjie_str: {
            type: String,
            default: ''
        },
        data_obj_old: {
            type: Object,
            default: {}
        },
        webhook: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            currentText: '',
            isLocked: false,
            arr: [],
            old_text: '',
            data_obj: {},
            // 页面上展示的标签
            tags_list: [],
            act_class: 'textarea'
        }
    },
    methods: {
        handleInput(target) {
            this.updateData(target.innerHTML)
        },
        updateData(text) {
            // 增加标签
            if(text.length - this.old_text.length > 50){
                // let new_text = text
                this.data_obj = {...this.data_obj, [this.pinjie_str]: this.$refs.tags[this.$refs.tags.length-1].innerHTML}
                // for(const item of this.$refs.tags){
                //     if(new_text.indexOf(item.innerHTML) != -1){
                //         this.tags_list.push(item.innerHTML)
                //         new_text = new_text.replace(item.innerHTML, '')
                //     }
                // }
                // this.tags_list = []
                // for(const key in this.data_obj){
                //     this.tags_list.push(this.data_obj[key])
                // }
            }
            // 删除标签
            // if(this.old_text.length - text.length > 20){
            //     this.tags_list = []
            //     for(const key in this.data_obj){
            //         this.tags_list.push(this.data_obj[key])
            //     }
            //     let del_tags = ''
            //     for(const index in this.tags_list){
            //         if(text.indexOf(this.tags_list[index]) == -1){
            //             del_tags = this.tags_list[index]
            //             this.tags_list.splice(index, 1)
            //         }
            //     }
            //     for(const key in this.data_obj){
            //         if(this.data_obj[key] == del_tags){
            //             delete this.data_obj[key]
            //             break
            //         }
            //     }
            // }
            let data = this.replace_data(this.data_obj, text)
            this.$emit('html_data', text, data, this.data_obj)
            this.old_text = text
        },
        // 替换标签字符串
        replace_data(data_obj, text) {
            if(text.indexOf("<br>") != -1){
                text = text.replaceAll("<br>", '')
            }
            for(const key in data_obj){
                let str1 = data_obj[key].substring(0, data_obj[key].lastIndexOf("</span>"))
                let te = str1.match(/<span data-v-(\S*)="">/)
                let str2 = str1.substring(0, str1.lastIndexOf(te[0]))
                let str3 = str2.substring(0, str2.lastIndexOf('</span>'))
                if(text.indexOf(data_obj[key]) != -1){
                    text = text.replaceAll(te[0]+data_obj[key]+'</span>', key)
                }else{
                    // 用户从最后面输入时情况
                    if(text.indexOf(str1) != -1){
                        text = text.replaceAll(str1, key)
                        text = text.replaceAll('</span></span>', '')
                        text = text.replaceAll(te[0], '')
                    }
                    
                    // 用户从中间输入时情况
                    if(text.indexOf(str2) != -1){
                        text = text.replaceAll(str2, key)
                    }
                    
                    // 用户从中间删除时情况
                    if(text.indexOf(str3) != -1){
                        text = text.replaceAll(str3, key)
                    }
                    // 用户乱输乱删偶然出现的情况
                    if(text.indexOf('</span></span>') != -1){
                        text = text.replaceAll('</span></span>', '')
                    }
                    if(text.indexOf(te[0]) != -1){
                        text = text.replaceAll(te[0], '')
                    }
                    if(text.indexOf('</span>') != -1){
                        text = text.replaceAll('</span>', '')
                    }
                }
            }
            return text
        }
    },

    mounted() {
        if(this.value.alia){
            this.arr.push(this.value.alia)
        }else{
            this.arr = []
        }
        if(this.webhook === "webhook"){
            this.act_class = "webhook"
        }
    },
    beforeDestroy() {
        
    },
    watch: {
        value(val) {
            if(!this.isLocked) {
                if(Object.prototype.toString.call(val) === '[object Object]'){
                    this.arr.push(val.alia)
                }else{
                    this.$refs.wTextareaContent.innerHTML = val
                    this.data_obj = this.data_obj_old
                    this.old_text = val
                }
            }
        },
        arr(val) {
            this.$nextTick(() => {
                this.handleInput(this.$refs.wTextareaContent)
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .textarea{
        width: 390px;
        min-height: 100px;
        font-size: 16px;
        padding-left: 5px;
        border: 1px solid rgba(178, 174, 174, 0.952);
        -webkit-user-modify: read-write-plaintext-only !important;

        .tag{
            margin: 5px;
            font-size: 15px;
            cursor: default;
            -webkit-user-modify: read-only !important;
        }
    }
    .webhook{
        width: 280px;
        min-height: 35px;
        font-size: 16px;
        padding-left: 5px;
        border: 1px solid rgba(178, 174, 174, 0.952);
        -webkit-user-modify: read-write-plaintext-only !important;

        .tag{
            margin: 5px;
            font-size: 15px;
            cursor: default;
            -webkit-user-modify: read-only !important;
        }
    }
</style>